<template>
	<view class="art-container">
		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-bar" @click="go('/subPackages/home/search/search')">
				<image src="/static/art/art_search.png" class="search-icon"></image>
				<text class="search-placeholder">搜索</text>
			</view>
		</view>

		<!-- 筛选标签 -->
		<view class="filter-section">
			<view class="filter-tabs">
				<view class="filter-tab active">
					<text class="filter-text" :class="{active: activeTab === 'comprehensive'}"
						@click="selectTab('comprehensive')">综合</text>
				</view>
				<view class="filter-tab">
					<text class="filter-text" :class="{active: activeTab === 'sales'}"
						@click="selectTab('sales')">销量</text>
				</view>
				<view class="filter-tab">
					<text class="filter-text" :class="{active: activeTab === 'price'}"
						@click="selectTab('price')">价格</text>
					<image :src="price_img" class="price-image"></image>
				</view>
			</view>
		</view>

		<!-- 艺术品列表 -->
		<view class="art-list" v-if="artList.length > 0">
			<view class="art-item" v-for="(item, index) in artList" :key="index" @click="goToDetail(item)">
				<image :src="item.mainImage" class="art-image"></image>
				<view class="art-info">
					<text class="art-title">{{ item.title }}</text>
					<view class="art-location">
						<image src="/static/address.png" class="location-icon"></image>
						<text class="location-text">{{ item.area }}</text>
					</view>
					<view class="art-price-row">
						<view class="price-info">
							<text class="current-price">{{ item.price }}</text>
							<text class="unit">{{ item.unit }}</text>
							<text class="original-price">{{ item.underlinePrice }}</text>
						</view>
						<image src="/static/home/home_add.png" class="add-image" @tap.stop="addProduct(item)"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="art-list" v-else>
			<view class="product-no-list">
				<image class="no-product-car" src="/static/no-car.png"></image>
				<text class="no-product-text">暂无商品</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				artList: [],
				activeTab: 'comprehensive', // 当前选中的tab
				priceOrder: 'asc',
				price_img: '/static/fitter_1.png',
			}
		},
		mounted() {
			this.requestArtList();
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				//请求购物车商品
				this.requestCartList()
			} else {
				// 未登录时清空购物车角标
				this.clearCartCount();
			}
		},
		methods: {
			//请求购物车商品
			requestCartList() {
				let that = this
				that.https({
					method: "GET",
					url: '/project/order/listCart',
					success: res => {
						console.log("res CartList-------- ", res)
						if (res.code == 200) {
							// 更新购物车角标数量
							const totalCount = res.rows[0].details.reduce((total, item) => {
								return total + (item.productNum || 0);
							}, 0);
							that.setCartCount(totalCount);
						} else {
							// 购物车为空时清空角标
							that.clearCartCount();
						}
					},
					fail: err => {},
					complete: com => {}
				})
			},
			//请求非遗的数据
			requestArtList() {
				let that = this
				let data;
				if (that.activeTab === 'sales') {
					data = {
						orderByColumn: "saleNum",
						productType: 2,
						pageSize: 20,
						pageNum: 1,
					}
				} else if (that.activeTab === 'price') {
					data = {
						isAsc: that.priceOrder,
						orderByColumn: "price",
						productType: 2,
						pageSize: 20,
						pageNum: 1,
					}
				} else {
					data = {
						productType: 2,
						pageSize: 20,
						pageNum: 1,
					}
				}
				that.https({
					method: "GET",
					url: '/project/product/list',
					data: data,
					success: res => {
						if (res.code == 200) {
							console.log("res ArtList -----  ", res)
							that.artList = res.rows
						}
					},
					fail: err => {

					},
					complete: com => {
						;
					}
				})
			},
			//添加商品
			addProduct(item) {
				console.log(" add product ===== ", item)
				let that = this
				const orderData = {
					orderType: 1,
					details: [{
						productId: item.id,
						mainImage: item.mainImage,
						productTitle: item.title,
						productPrice: item.price,
						productNum: 1,
						unit: item.unit,
						areaAddr: item.area,
					}],
				}
				that.https({
					method: "POST",
					url: '/project/order/editCart',
					data: orderData,
					success: res => {
						if (res.code == 200) {
							uni.showToast({
								title: '已添加到购物车',
								icon: 'success'
							});
							console.log("res addProduct -----  ", res)
							// 增加购物车角标数量
							that.addCartCount(1);
						}
					},
					fail: err => {},
					complete: com => {}
				})
			},
			//tab点击
			selectTab(tab) {
				this.activeTab = tab;
				if (tab === 'price') {
					// 切换价格排序
					if (this.priceOrder === 'default') {
						this.priceOrder = 'asc';
						this.price_img = '/static/fitter_3.png';
					} else if (this.priceOrder === 'asc') {
						this.priceOrder = 'desc';
						this.price_img = '/static/fitter_2.png';
					} else {
						this.price_img = '/static/fitter_3.png';
						this.priceOrder = 'asc';
					}
				}
				this.requestArtList();
			},
			goToDetail(item) {
				this.go(`/subPackages/classify/goodsDetail/goodsDetail?id=${item.id}`)
			}
		}
	}
</script>

<style lang="scss">
	.art-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 搜索栏 */
	.search-section {
		background-color: #f5f5f5;
		padding: 20rpx 30rpx;

		.search-bar {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 20rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.search-icon {
				width: 16px;
				height: 16px;
				margin-right: 8px;
			}

			.search-placeholder {
				color: #999;
				font-size: 14px;
			}
		}
	}

	/* 筛选标签 */
	.filter-section {
		margin: 20rpx 30rpx;
		border-bottom: 1px solid #f0f0f0;

		.filter-tabs {
			display: flex;
			margin: 20rpx 40rpx 20rpx 60rpx;
			justify-content: space-between;

			.filter-tab {
				display: flex;
				align-items: center;
				position: relative;

				.filter-text {
					font-size: 14px;
					color: #666;
				}

				.filter-text.active {
					color: #009966;
					font-size: 28rpx;
				}

				.price-image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
	}

	/* 艺术品列表 */
	.art-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 20px;

		.art-item {
			width: 48%;
			background-color: white;
			border-radius: 12px;
			margin-bottom: 15px;
			display: flex;
			flex-direction: column;
			position: relative;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

			.art-image {
				width: 100%;
				height: 334rpx;
				border-radius: 16rpx 16rpx 0 0;
				margin-right: 30rpx;
			}

			.art-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				margin: 16rpx;

				.art-title {
					width: 100%;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					text-align: left;
					margin-bottom: 8rpx;
				}

				.art-location {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					.location-icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 4rpx;
					}

					.location-text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #333333;
						text-align: left;
					}
				}



				.art-price-row {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.price-info {
						display: flex;
						align-items: baseline;

						.current-price {
							font-family: PingFang SC, PingFang SC;
							font-weight: 600;
							font-size: 24rpx;
							color: #FF4C10;
							text-align: left;
							margin-right: 4rpx;
						}

						.unit {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #333333;
							text-align: left;
							margin-right: 4rpx;
						}

						.original-price {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #767676;
							text-align: left;
							text-decoration: line-through;
						}
					}

					.add-image {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
	}

	.product-no-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 150rpx 0;

		.no-product-car {
			width: 360rpx;
			height: 360rpx;
		}

		.no-product-text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: center;
		}
	}
</style>